<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Triangle</title> <!--标题-->
	<script type="text/javascript" src="js/Matrix.js"></script>
	<script type="text/javascript" src="js/MatrixState.js"></script>	
	<script type="text/javascript" src="js/GLUtil.js"></script>
	<script type="text/javascript" src="js/Triangle.js"></script>
	<script type="text/javascript" src="js/LoadShaderUtil.js"></script>
	<script>
		//GLES上下文
	    var gl;
	    //变换矩阵管理类对象
	    var ms=new MatrixState();
	    //要绘制的3D物体
	    var ooTri;
		//着色器程序列表，集中管理
		var shaderProgArray=new Array();
      //  var fb, rb, texture;
        var framebuffer;
        var texture;
        //初始化的方法
	    function start()
	    {    		        
	        //获取GL上下文
	        gl = initWebGLCanvas("bncanvas");
	        if (!gl) //若获取GL上下文失败
	        {
	        	 alert("创建GLES上下文失败!");//显示错误提示信息
	           return;
	        }    
	        //获取3D Canvas
	        var canvas = document.getElementById('bncanvas');
	        //设置视口
	        gl.viewport(0, 0, canvas.width, canvas.height);
	        //设置屏幕背景色RGBA
	        gl.clearColor(0.0,0.0,0.0,1.0);  
	        //初始化变换矩阵
	        ms.setInitStack();
	        //设置摄像机
			ms.setCamera(0,0,-5,0,0,0,0,1,0);
	        //设置投影参数
	        ms.setProjectFrustum(-1.5,1.5,-1,1,1,100);
	        gl.enable(gl.DEPTH_TEST);//开启深度检测
			
	        //加载着色器程序
			loadShaderFile("shader/shader.bns",0);
			
			if(shaderProgArray[0])//如果着色器已加载完毕
			{
				ooTri=new Triangle(gl,shaderProgArray[0]);//创建三角形绘制对象
			}
			else
			{
				setTimeout(function(){ooTri=new Triangle(gl,shaderProgArray[0]);},10); //休息10ms后再执行
			}
	        //初始化旋转角度
	        currentAngle = 0;
	        //初始化角度步进值
	        incAngle = 0.0;

            /**************缓冲相关**************/
            initFramebufferObject(gl);



			//定时绘制画面
	       // setInterval("drawFrame();",1);
			
			setTimeout("drawFrame()",1000)
	    }
	    //绘制一帧画面的方法
	    function drawFrame()
	    {	  
			if(!ooTri){
				//alert("加载未完成！");//提示信息
				return;
			}
            // 在帧缓冲区的颜色关联对象即纹理对象中绘制立方体，纹理使用图片
            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);// 绑定帧缓冲区对象后绘制就会在绑定帧缓冲区中进行绘制

            gl.viewport(0, 0, 433, 433);
            gl.clearColor(0.2, 0.2, 0.99, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            //保护现场
            ms.pushMatrix();
            //执行旋转
            ms.rotate(currentAngle,0,1,0);

            ooTri.drawSelf(ms, false);
            //恢复现场
            ms.popMatrix();

            // 在canvas上绘制矩形，纹理使用上一步在纹理对象中绘制的图像
            gl.bindFramebuffer(gl.FRAMEBUFFER, null);// 接触绑定之后，会在默认的颜色缓冲区中绘制
            gl.bindTexture(gl.TEXTURE_2D, texture);

            gl.viewport(0, 0, 400, 400);

            //背景颜色_黑色
            gl.clearColor(0.0, 0.0, 0.0, 1.0);

            //清除着色缓冲与深度缓冲
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);


	        //保护现场
	        ms.pushMatrix(); 
	        //执行旋转
			ms.rotate(currentAngle,0,1,0);
			//绘制物体
			ooTri.drawSelf(ms, true);
			//恢复现场
			ms.popMatrix();
			//修改旋转角度
	        currentAngle += incAngle;
	        if (currentAngle > 360)//保证角度范围不超过360
	            currentAngle -= 360; 		
	        
	        requestAnimationFrame(drawFrame)
	    }
        function initFramebufferObject(gl) {
             framebuffer = gl.createFramebuffer();

            // 新建纹理对象作为帧缓冲区的颜色缓冲区对象
             texture = gl.createTexture();
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 256, 256, 0, gl.RGB, gl.UNSIGNED_BYTE, null);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

            // 新建渲染缓冲区对象作为帧缓冲区的深度缓冲区对象
            var depthBuffer = gl.createRenderbuffer();
            gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
            gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 256, 256);

            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

            // 检测帧缓冲区对象的配置状态是否成功
            var e = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
            if (gl.FRAMEBUFFER_COMPLETE !== e) {
                console.log('Frame buffer object is incomplete: ' + e.toString());
                return;
            }

            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
            gl.bindTexture(gl.TEXTURE_2D, null);
            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
        }
	</script>
</head>

<body onload="start();">
	<canvas height="800" width="800" id="bncanvas">
	    若看到这个文字，说明浏览器不支持WebGL!
	</canvas>
</body>
</html>